<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: left">
      <el-form-item class="font" label="部门名称">
        <el-input v-model="formInline.deptName" clearable placeholder="部门名称"></el-input>
      </el-form-item>
      <el-form-item class="font" label="用户名称 ">
        <el-input v-model="formInline.username" clearable placeholder="用户名称"></el-input>
      </el-form-item>
      <el-form-item class="font" label="手机号 ">
        <el-input v-model="formInline.tel" clearable placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item class="font" label="状态 ">
        <el-select v-model="formInline.status" clearable placeholder="状态">
          <el-option label="正常" value="1"></el-option>
          <el-option label="异常" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="font" label="开始时间 ">
        <el-date-picker
            v-model="formInline.startTime"
            class="font"
            clearable
            placeholder="开始时间"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="font" label="结束时间 ">
        <el-date-picker
            v-model="formInline.endTime"
            class="font"
            clearable
            placeholder="结束时间"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" style="background-color: #92dbef;color: white" @click="list">搜索</el-button>
        <el-button icon="el-icon-refresh-left" style="background-color: #77becc;color: white" @click="clean">重置
        </el-button>
        <el-button icon="el-icon-circle-plus-outline" style="background-color: #029bd6;color: #ffffff" type="primary"
                   @click="enrollOpen">添加
        </el-button>
      </el-form-item>
    </el-form>
    <!--1视图-->
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          label="用户编号"
          prop="id"
          width="120">
      </el-table-column>
      <el-table-column
          label="姓名"
          prop="username"
          width="150">
      </el-table-column>
      <el-table-column
          label="昵称"
          prop="nickname"
          width="150">
      </el-table-column>
      <el-table-column
          label="手机号"
          prop="tel"
          width="180">
      </el-table-column>
      <el-table-column
          label="状态"
          prop="status"
          width="100">
        <template v-slot="scope">
          <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#00a6ac"
              inactive-color="#9D64AAFF"
              style="display: block"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          prop="createDate"
          width="230">
      </el-table-column>
      <el-table-column
          label="部门名称"
          prop="deptName"
          width="200">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="openUpdate(scope.row)">
            <span style="color: #20afaa;font-size: 20px">
            <i class="el-icon-edit"></i>
            </span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        :current-page.sync="current"
        :page-size="size"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="goPage">
    </el-pagination>

    <el-dialog :visible.sync="dialogFormVisible" title="添加" width="700px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" class="font" label="用户名称：" prop="username">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" class="font" label="用户密码：" prop="password">
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" class="font" label="用户昵称：" prop="nickname">
              <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" class="font" label="手机号码：" prop="tel">
              <el-input v-model="form.tel" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="font" label="岗位：">
          <el-radio v-for="r in roles" v-bind:key="r.id" v-model="form.roleId" :label="r.id" class="font">{{ r.name }}
          </el-radio>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" class="font" label="用户状态">
          <el-radio v-model="form.status" :label="1" class="font">正常</el-radio>
          <el-radio v-model="form.status" :label="0" class="font">异常</el-radio>
        </el-form-item>
        <el-form-item class="font" label="归属部门：" prop="deptId">
          <el-select v-model="form.deptId" class="font" clearable placeholder="请选择部门">
            <el-option v-for="d in dept" v-bind:key="d.id" :label="d.name" :value="d.id" class="font"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="enroll('form')">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="dialogFormVisible1" title="修改" width="700px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" class="font" label="用户昵称：" prop="nickname">
              <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" class="font" label="手机号码：" prop="tel">
              <el-input v-model="form.tel" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="font" label="岗位：">
          <el-radio v-for="r in roles" v-bind:key="r.id" v-model="form.roleId" :label="r.id" class="font">{{ r.name }}
          </el-radio>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" class="font" label="用户状态">
          <el-radio v-model="form.status" :label="1" class="font">正常</el-radio>
          <el-radio v-model="form.status" :label="0" class="font">异常</el-radio>
        </el-form-item>
        <el-form-item class="font" label="归属部门：" prop="deptId">
          <el-select v-model="form.deptId" class="font" placeholder="请选择部门">
            <el-option v-for="d in dept" v-bind:key="d.id" :label="d.name" :value="d.id" class="font"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "UserView",
  data() {
    return {
      tableData: [],
      current: 1,
      size: 5,
      total: 0,
      formInline: {},
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        nickname: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
        ],
        tel: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
        ],
        deptId: [
          {required: true, message: '请选择部门', trigger: 'change'},
        ],
      },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: "120px",
      form: {},
      dept: [],
      roles: [],
      //2属性定义
    }
  }, methods: {
    update(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.axios.post("userservice/user/update", this.form).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg)
              this.list()
              this.dialogFormVisible1 = false
            } else {
              this.$message.success(res.data.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    openUpdate(row) {
      this.form = row
      this.getRoleByUserId(this.form.id)
      this.getDept()
      this.getRole();
      this.form.roleId = row.roleId
      this.dialogFormVisible1 = true;
    },
    enrollOpen() {
      this.form = {}
      this.getDept();
      this.getRole();
      this.dialogFormVisible = true
    },
    enroll(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.axios.post("userservice/user/enroll", this.form).then(res => {
            if (res.data.code == 200) {
              console.log(111)
              this.$message.success(res.data.msg)
              this.list()
              this.dialogFormVisible = false;
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    goPage(current) {
      this.current = current;
      this.list();
    },
    list() {
      this.axios.post("userservice/user/list?current=" + this.current + "&size=" + this.size, this.formInline).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    getDept() {
      this.axios.post("userservice/dept/list3").then(res => {
        this.dept = res.data.data
      })
    },
    getRole() {
      this.axios.post("userservice/role/list2").then(res => {
        this.roles = res.data.data
      })
    },
    getRoleByUserId(userId) {
      this.axios.post("userservice/role/getRoleByUserId?userId=" + userId).then(res => {
        this.form.roleId = res.data.data
      })
    }, clean() {
      this.formInline = {};
    }
  }, created() {
    this.list();
  }
}
</script>

<style scoped>
.font {
  font-weight: bold;
}
</style>